<template>
  <div>
    <van-nav-bar
      title="动态发布"
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="dongtai">
      <van-field
        v-model="page"
        autosize
        label=""
        type="textarea"
        placeholder=""
        show-word-limit
        class="text"
      />
      <div>
        <el-upload
          :multiple="multiple"
          action="/uploadPics"
          list-type="picture-card"
          :auto-upload="false"
          :http-request="uploadFile"
          :limit="6"
          ref="uploadPic"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div>
        <center>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleAddSomePicsInfo = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="addSomePeoplePicsForm"
              >发布</el-button
            >
          </span>
        </center>
      </div>
    </div>
  </div>
</template>
<script>
import { reqtai } from "../../api";
import axios from "axios";
export default {
  data() {
    return {
      page: "",
      formPicsData: "",
      multiple: true,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.replace("/homeland");
    },
    uploadFile(file) {
      this.formPicsData.append("file", file.file);
    },
    addSomePeoplePicsForm() {
      // let self = this;
      this.formPicsData = new FormData();
      this.$refs.uploadPic.submit();
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios
        .post(
          "http://8.140.158.200:8080/zhang/demo/pri/doUpload1",
          this.formPicsData,
          config
        )
        .then((res) => {
          //TODO：具体自己逻辑部分
          console.log(res);
          this.$router.replace("/homeland");
        })
        .catch((err) => {
          this.$router.replace("/homeland");
          // console.log(err);
          this.$toast("上传失败", err);
        });
      const { page } = this;
      reqtai({ page }).then((res) => {
        console.log(res);
        this.$toast(res.msg);
      });
    },
  },
};
</script>
<style lang="stylus">
.dongtai{
  overflow hidden
  background #fff
}
.van-uploader{
  width 100%
}
.text{
  height 150px
 border-bottom:3px solid #eee;
}
.van-icon::before {
  display unset
}
.submit{
    text-align: center;
    width: 90%;
    height: 40px;
    border-radius: 10px;
    background-color turquoise
    margin 0 5%
}
.van-nav-bar__content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 50px;
    background-color dodgerblue
}
.van-nav-bar .van-icon {
    color: #fff;
}
.van-nav-bar__text {
    color: #fff;
}
.van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
}
.van-image__img{
  object-fit: unset !important;
}
.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 30%;
    height: 30%;
    line-height: 111px;
    vertical-align: top;
}
.el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 110px;
    height: 105px;
    margin: 0 8px 8px 0;
    display: inline-block;
}
</style>
